import React from "react";
import { useState } from "react";
import PubSub from "pubsub-js";

export default function Search() {
  //声明状态
  let [keyword, setKeyword] = useState("");

  //声明函数
  let changeHandle = (e) => {
    setKeyword(e.target.value);
  };

  //声明函数点击事件的回调
  let send = () => {
    //发布
    PubSub.publish("keyword", keyword);
  };

  return (
    <div style={{ textAlign: "right" }}>
      <div className="row">
        <div className="col-xs-3 col-xs-offset-9">
          <div className="input-group">
            <input
              type="text"
              className="form-control"
              placeholder="输入您的关键字"
              value={keyword} onChange={changeHandle}
            />
            <span className="input-group-btn">
              <button onClick={send} className="btn btn-default" type="button">
                搜索
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}
